<template>
  <div class="app_content_container">
    <Breadcrumb :items="['置放群组']" />
    <BaseTable
      ref="baseTableRef"
      :apiUrl="getPlacemenGroupList"
      :columns="columns"
      placeholder="请输入群组名称"
      height="calc(100vh - 180px)"
      @handleEditOrAdd="$refs.addOrEditRef.open(record)"
    >
      <template #action="{ record }">
        <ga-link @click="$refs.relatedVmRef.open(record)">关联云主机</ga-link>
        <ga-link @click="$refs.appStrategyRef.open(record)">应用策略</ga-link>
        <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
        <ga-link status="danger" @click="handleDelete([record?.id])">删除</ga-link>
      </template>
    </BaseTable>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
    <relatedVm ref="relatedVmRef" @fetchData="$refs.baseTableRef.fetchData()" />
    <appStrategy ref="appStrategyRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { columns } from "./columns";
import { deletePlacemenGroup, getPlacemenGroupList } from "@/api/placemenGroup";
import { warningModal } from "@/hooks/useWarningModal";
import { Message } from "@garco-design/web-vue";
import addOrEdit from "./addOrEdit.vue";
import relatedVm from "./components/relatedVm.vue";
import appStrategy from "./components/appStrategy.vue";

// 处理删除方法
const baseTableRef = ref(null);
const handleDelete = async (records) => {
  const ids = records.map((item) => item.id || item);
  console.log("ids", ids);
  warningModal(`确定要删除数据吗`, async () => {
    try {
      const { code } = await deletePlacemenGroup(ids);
      if (code === 20000) Message.success("操作成功");
      baseTableRef.value.fetchData();
    } catch (err) {
      console.log(err);
    }
  });
};
</script>

<style lang="scss" scoped></style>
